<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>

    </style>
</head>

<body>
<div id="app">
   <!-- 左侧树形图-->
    <div id = "aside" style="width: 130px; display: block; float: left;" >
        <el-tree
                :data="departTree"
                 ref="departTree"
                 node-key="label"
                :props="defaultProps"
                @node-click="handleNodeClick" >
        </el-tree>
    </div>

    <!--模糊查询-->
    <div id = "main"  style="float: left; display: block;">
        <el-input placeholder="部门名称" v-model="info.name" style="display: inline-block;width: 200px;"></el-input>
        <el-button icon="el-icon-search" circle @click="searchData"></el-button>
        <el-button icon="el-icon-plus" type="success" circle @click="showAddDialog"></el-button>

        <el-button icon="el-icon-download" type="primary"  @click="downloadInfo()">导出</el-button>
        <el-button icon="el-icon-upload2" type="primary"  @click="uploadInfo()">导入</el-button>
        <a  type="button" primary href="/cai/temp.xlsx" style="text-decoration: none;font-size: 14px;color: black" >下载模板</a>
        <form id="haha" >
            <input type="file" name="d">
        </form>

        <!--部门数据展示-->
        <el-table :data="departArr" stripe >
            <el-table-column prop="id" label="编号" width="100px">
            </el-table-column>
            <el-table-column prop="dname" label="部门名称" width="100px">
            </el-table-column>
            <el-table-column prop="startdate" label="成立日期" width="150px">
            </el-table-column>
            <el-table-column prop="other" label="描述" width="180px">
            </el-table-column>

            <el-table-column prop="s.name" label="状态" width="150px">
            </el-table-column>
            <el-table-column label="操作" width="200px">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="showUpdateDialog(scope.row.id)">
                        编辑
                    </el-button>

                    <el-button type="text" @click="delDepart(scope.row.id)">删除</el-button>

                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @current-change="handleCurrentChange"
                background
                layout="prev, pager, next"
                :total="pageCount">
        </el-pagination>
    </div>



    <el-dialog title="添加部门" :visible.sync="addDepartVisible" width="30%" center>

        <el-form :model="addInfo" :rules="rules" ref="addInfo" label-width="100px" class="demo-ruleForm"
                 size="mini">
            <el-form-item label="部门名称" prop="dname">
                <el-input v-model="addInfo.dname"></el-input>
            </el-form-item>
            <el-form-item label="部门描述" prop="other">
                <el-input v-model="addInfo.other"></el-input>
            </el-form-item>

            <el-form-item label="上级部门" prop="did">
                <el-select v-model="addInfo.did" placeholder="请选择">
                    <el-option :value="0">无上级部门</el-option>
                    <el-option v-for="(d,i) in supDepartArr" :label="d.dname" :value="d.id"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="级别" prop="type">
                <el-select v-model="addInfo.type" placeholder="请选择">
                    <el-option v-for="(t,i) in typeArr" :label="t.tname" :value="t.type"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="部门状态" prop="sid">
                <el-select v-model="addInfo.sid" placeholder="请选择">
                    <el-option v-for="(s,i) in stateArr" :label="s.name" :value="s.id"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="创立日期" prop="startdate">
                <el-input v-model="addInfo.startdate" type="date"></el-input>
            </el-form-item>
        </el-form>


        <div slot="footer" class="dialog-footer">
            <el-button @click="addDepartVisible=false">取 消</el-button>
            <el-button type="primary" @click="addDepartInfo">确 定</el-button>
        </div>

    </el-dialog>

    <el-dialog title="编辑部门" :visible.sync="updateDepartVisible" width="30%" center>
        <el-form :model="updateInfo" :rules="rules" ref="updateInfo" label-width="100px" class="demo-ruleForm"
                 size="mini">
            <input v-model="updateInfo.id" type="hidden">
            <el-form-item label="部门名称" prop="dname">
                <el-input v-model="updateInfo.dname"></el-input>
            </el-form-item>
            <el-form-item label="部门描述" prop="other">
                <el-input v-model="updateInfo.other"></el-input>
            </el-form-item>
            <el-form-item label="上级部门" prop="did">
                <el-select v-model="updateInfo.did" placeholder="请选择">
                    <el-option v-for="(d,i) in supDepartArr" :label="d.dname" :value="d.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="级别" prop="type">
                <el-select v-model="updateInfo.type" placeholder="请选择">
                    <el-option v-for="(t,i) in typeArr" :label="t.tname" :value="t.type"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="部门状态"  prop="sid">
                <el-select v-model="updateInfo.sid" >
                    <el-option v-for="(s,i) in stateArr" :label="s.name" :value="s.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="创立日期" prop="startdate">
                <el-input v-model="updateInfo.startdate" type="date"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="updateDepartVisible=false">取 消</el-button>
            <el-button type="primary" @click="updateDepart">确 定</el-button>
        </div>

    </el-dialog>


</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            rules: {
                dname: [{
                    required: true,
                    message: '请输入部门名称',
                    trigger: 'blur'
                },
                    {
                        min: 2,
                        max: 10,
                        message: '长度在2到10个字符',
                        trigger: 'blur'
                    }
                ],
                other: [{
                    required: true,
                    message: '请输入部门描述',
                    trigger: 'blur'
                },
                    {
                        min: 1,
                        max: 500,
                        message: '长度在1到500个字符',
                        trigger: 'blur'
                    }],
                sid: [{
                    required: true,
                    message: '请选择部门状态',
                    trigger: 'blur'
                }],
                did:[{
                    required: true,
                    message: '请选择上级部门',
                    trigger: 'blur'
                }],
                type:[{
                    required: true,
                    message: '请选择级别',
                    trigger: 'blur'
                }],
                state:
                    [{
                        required: true,
                        message: '请选择部门状态',
                        trigger: 'blur'
                    }],
                startdate: [{
                    type: 'string',
                    required: true,
                    message: '请选择创立日期',
                    trigger: 'change'
                }],
            },
            info:{},
            departArr: [],
            addDepartVisible: false,
            updateDepartVisible:false,
            addInfo: {},
            updateInfo:{},
            stateArr: [],
            supDepartArr:[],
            typeArr:[],
            pageCount:0,
            departTree: [],
            treeInfo:{},
            defaultProps: {
                children: 'children',
                label: 'label'
            }

        },
        methods: {
            downloadInfo:function(){
                window.location.href="/cai/depart/download?dname="+app.info.name;
            },
            uploadInfo:function(){
                var data = new FormData(haha);
                $.ajax({
                    url:"/cai/depart/uploadDeptExcel",
                    type:"POST",
                    data:data,
                    processData:false,
                    contentType:false,
                    success:function(backData){

                    }
                });
                getInfo(1,10);
            },
            handleCurrentChange:function(val) {
               getInfo(val,10);
            },

            handleNodeClick(data) {
                app.treeInfo.did = Object.values(data)[0];
                app.treeInfo.type = Object.values(data)[2]
                $.post("/cai/depart/listSubDepart",app.treeInfo,function (backData) {
                        app.departArr = backData.data;
                    });
            },
            updateDepart:function(){
                app.$refs["updateInfo"].validate((valid) => {
                    if (valid) {
                        $.post("/cai/depart/update", app.updateInfo, function(backData) {

                            if (backData.code == 1) {
                                app.$notify.success({
                                    title: '恭喜',
                                    message: backData.msg,
                                });
                                app.updateDepartVisible = false;
                                getInfo(1,10);
                            } else {
                                app.$notify.error({
                                    title: '温馨提示',
                                    message: backData.msg,
                                });
                            }
                        });

                    }
                });

            },
            delDepart:function(a){
                if (a == 1){
                    app.$notify.error({
                        title: '温馨提示',
                        message: '总经办不可删除',
                    });
                }else {
                    app.$confirm('此操作将永久删除该部门, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        $.get("/cai/depart/delete/"+a,function (backData) {
                            if(backData.code==1){
                                app.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                                //重新拉取部门信息
                                getInfo(1,10);
                            }
                        });
                    }).catch(() => {
                        app.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                }
            },
            showUpdateDialog:function(a){
                if (a == 1){
                    app.$notify.error({
                        title: '温馨提示',
                        message: '总经办不可修改',
                    });
                }else {
                    $.get("/cai/depart/getDepart/"+a,function (backData) {
                        //1.发送请求获取当前部门状态信息
                        $.get("/cai/depart/listSupDepart",function (supDepartBackData) {
                            //2.获取上级部门列表
                            $.get("/cai/depart/listState", function(stateBackData) {
                                $.get("/cai/depart/listType",function (typeBackData) {
                                    app.typeArr =  typeBackData.data;
                                    app.stateArr = stateBackData.data;
                                    app.supDepartArr = supDepartBackData.data;
                                    //3.展示弹窗
                                    app.updateInfo = backData.data;
                                    app.updateDepartVisible = true;
                                })
                            });

                        })

                    });
                }
            },
            searchData: function() {
                getInfo(1,10);
            },

            showAddDialog: function() {
                //获取上级部门列表
                $.get("/cai/depart/listSupDepart",function (supDepartBackData) {
                    //获取状态信息
                    $.get("/cai/depart/listState", function(backData) {
                        $.get("/cai/depart/listType",function (typeBackData) {

                        //绑定状态数据
                        app.stateArr = backData.data;
                        app.supDepartArr = supDepartBackData.data;
                        app.typeArr = typeBackData.data
                        //展示弹窗
                        app.addDepartVisible = true;
                        app.$refs["addInfo"].resetFields();
                        });
                    });

                });




            },

            addDepartInfo: function() {
                app.$refs["addInfo"].validate((valid) => {
                    if (valid) {
                        $.post("/cai/depart/addDepart", app.addInfo, function(backData) {

                            if (backData.code == 1) {
                                app.$notify.success({
                                    title: '恭喜',
                                    message: backData.msg,
                                });
                                app.addDepartVisible = false;
                                getInfo(1,10);
                            } else {
                                app.$notify.error({
                                    title: '温馨提示',
                                    message: backData.msg,
                                });
                                app.addDepartVisible = false;
                            }
                        });

                    }
                });
            }


        }
    });



    function getInfo(a,b) {
        app.info.pageNo = a;
        app.info.pageCount = b;
        $.post("/cai/depart/list", app.info, function(backData) {

            app.departArr = backData.data.pageData;
            app.pageCount = backData.data.totalCount;

        });
        $.get("/cai/depart/listTree",function (backData) {
            app.departTree = backData.data;
        })
    };
    getInfo(1,10);
</script>
</body>
</html>
